<template>
	<view class="bigBg">
		<view class="form">
			<view class="item">
				<image class="preIcon" src="../../../static/login/login/phone.png" mode=""></image>
				<input v-model="phone" placeholder="请输入手机号" type="number"/>
			</view>
			<view class="item">
				<image class="preIcon" src="../../../static/login/login/phone.png" mode=""></image>
				<input v-model="code" placeholder="请输入验证码" type="number"/>
				<view @click="sendCode" class="btn" :class="{actCode: phone.length == 11}"> 获取验证码</view>
			</view>
			<view class="item">
				<image class="preIcon pass" src="../../../static/login/login/pass.png" mode=""></image>
				<input v-if="passType" v-model="pass" placeholder="请输入密码" type="password"/>
				<input v-else v-model="pass" placeholder="请输入密码" type="text"/>
				<view  @click="passType = !passType" class="paddingBox">					
					<image class="see" :src="passType ? '../../../static/login/login/noSee.png' : '../../../static/login/login/see.png'" mode=""></image>			
				</view>
			</view>
			<view class="item">
				<image class="preIcon pass" src="../../../static/login/login/pass.png" mode=""></image>
				<input v-if="repeatPassType" v-model="reapetPass" placeholder="请确认密码" type="password"/>
				<input v-else v-model="reapetPass" placeholder="请确认密码" type="text"/>
				<view  @click="repeatPassType = !repeatPassType" class="paddingBox">					
					<image class="see" :src="repeatPassType ? '../../../static/login/login/noSee.png' : '../../../static/login/login/see.png'" mode=""></image>			
				</view>
			</view>
			<view class="item">
				<image class="preIcon" src="../../../static/login/login/phone.png" mode=""></image>
				<input v-model="inviteCode" placeholder="请输入邀请码" type="number"/>
			</view>
			<button class="submitBtn" hover-class="submitBtnClick" @click="login" type="default">注册</button>
			<view @click="isRead = !isRead" class="readXy">
				<image class="select" :src="isRead ? '../../../static/login/login/selected.png' : '../../../static/login/login/noSelect.png'" mode=""></image>
				<view class="txt">
					我已阅读并同意
					<text class="text">《用户服务协议》</text>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				pass: '',
				reapetPass: '',
				inviteCode: '',
				code: '',
				passType: true,
				repeatPassType: true,
				isRead: true
			};
		},
		methods: {
			login() {},			
			async sendCode() {								
				if ( this.phone.length != 11) {
					return false;
				}
				const res = await this.$http.post('/verificationCode/register', {
					phone: this.phone,
				})
			},
		}
	}
</script>

<style lang="less">
.bigBg{
	width: 750rpx;
	height: 100vh;
	background-color: rgb(18,16,37);
}
.form{
	padding: 0 100rpx;
	padding-top: 160rpx;
	.item{
		display: flex;
		align-items: center;
		height: 144rpx;
		width: 100%;
		border-bottom: 1px solid rgba(119, 128, 140, 1);
		.preIcon{
			width: 34rpx;
			height: 52rpx;
		}
		.pass{
			width: 36rpx;
			height: 48rpx;
		}
		input{
			height: 100%;
			font-size: 32rpx;
			line-height: 144rpx;
			margin-left: 30rpx;
			flex: 1;
			color: #fff;
		}
		.see{
			width: 34rpx;
			height: 28rpx;
		}
	}
	.ctrBox{
		height: 118rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26rpx;
		color: rgba(119, 128, 140, 1);
		.left{
			color: rgba(1, 216, 194, 1);
		}
	}
	.submitBtn{
		width: 550rpx;
		height: 88rpx;
		background: rgba(1, 217, 194, 1);
		border-radius: 8rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
		color: rgba(255, 255, 255, 1);
		margin-top: 60rpx;
	}
	.submitBtnClick{
		opacity: .8;
	}
	.readXy{
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		.select{
			width: 20rpx;
			height: 20rpx;
		}
		.txt{
			margin-left: 4rpx;
			color: rgba(88, 87, 102, 1);
			font-size: 22rpx;
			.text{
				color: rgba(189, 188, 188, 1);
			}
		}
	}
}
.btn{
	font-size: 32rpx;
	color: rgba(119, 128, 140, 1);
	margin-left: auto;
}
.actCode{
	color: rgba(1, 217, 194, 1);
}
</style>
